<template>
	<view class="content">
		<view class="air-top">
			<view class="air-top-inner">
				<view class="circle-out">
					<!-- :style="linearColor" -->
					<view class="circle" :style="{background: bgcolor, '--colorbefore': colorbefore,'--colorafter':colorafter}">
						<view class="circle-inner-back"></view>
					</view>
					<view class="circle-inner" id="sliderCircle" @touchmove="touchMove" @touchend="touchEnd"
						:style="'transform: rotate('+arcNow+'deg);'">
					</view>
					<view class="circle-num">{{rotVal}}<text>{{unit}}</text></view>
					<view class="circle-name">{{name}}</view>
					<view class="circle-mini">{{minVal}}{{unit}}</view>
					<view class="circle-max">{{maxVal}}{{unit}}</view>
				</view>
			</view>
			<view v-if="showBtn" class="control-icon reduce-icon" @click="decrease()">-</view>
			<view v-if="showBtn" class="control-icon add-icon" @click="increase()">+</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			showBtn:{
				type:Boolean,
				default:true
			},
			name: {
				// 名称
				type: String,
				default: '浓度'
			},
			unit: {
				// 单位
				type: String,
				default: "%"
			},
			minVal: {
				// 最小
				type: Number,
				default: 21
			},
			maxVal: {
				// 最大
				type: Number,
				default: 24
			},
			initVal: {
				// 初始值
				type: Number,
				default: 21
			},
			step: {
				// 初始值
				type: Number,
				default: 0.1
			},
			action: {
				type: Function
			},
			bgcolor:{
				type:String,
				default:" linear-gradient(to right, #80e2f5, #5175e9)"
			},
			colorbefore:{
				type:String,
				default:" linear-gradient(to right, #7bd7f3, #7bd7f3)"
			},
			colorafter:{
				type:String,
				default:" linear-gradient(to right, #5a8aec, #5580ea)"
			}
		},
		data() {
			return {
				arcNow: 0,
				rotVal: 21,
				halfX: 0,
				halfY: 0,
				centerX: 0,
				centerY: 0
			}
		},
		mounted() {
			setTimeout(() => {
				let view = uni.createSelectorQuery().in(this).select('#sliderCircle');
				view.boundingClientRect(data => {
						this.centerX = data.left + data.width / 2;
						this.centerY = data.top + data.height / 2;

						this.halfX = data.left + data.width / 2;
						this.halfY = data.top;

						this.arcNow = 268 * (this.initVal - this.minVal) / (this.maxVal - this.minVal)
						this.rotVal = this.initVal;
					})
					.exec();
			}, 100)
		},
		methods: {
			
			touchMove(e) {
				this.drawMiniCircle(e)
			},
			touchEnd(e) {
				this.drawMiniCircle(e)
				this.action()
			},
			decrease() {
				let value = (Number(this.rotVal) - this.step).toFixed(1)
				if (value < this.minVal) return
				this.rotVal = Math.floor(value * 10) / 10; //取一位小数
				this.arcNow = 268 * (this.rotVal - this.minVal) / (this.maxVal - this.minVal)

				//todo
				this.action()
			},
			increase() {
				let value = (Number(this.rotVal) + this.step).toFixed(1)
				if (value > this.maxVal) return
				this.rotVal = Math.floor(value * 10) / 10; //取一位小数
				this.arcNow = 268 * (this.rotVal - this.minVal) / (this.maxVal - this.minVal)
				//todo
				this.action()
			},

			drawMiniCircle(e) {
				let nowX = e.changedTouches[0].clientX;
				let nowY = e.changedTouches[0].clientY;

				let arcNow = 0;
				if (nowX <= this.centerX) {
					let yDis = nowY - this.centerY;
					if (yDis > 0) {
						arcNow = 134 - (180 - Math.atan((this.centerX - nowX) / (nowY - this.centerY)) * 180 / 3.14159);
						// console.log('左上');
					}

					if (yDis < 0) {
						arcNow = 134 - (Math.atan((this.centerX - nowX) / (this.centerY - nowY)) * 180 / 3.14159)
						// console.log('左下');
					}
				} else {
					let yDis = nowY - this.centerY;
					if (yDis > 0) {
						// console.log('右上');
						arcNow = 134 + (180 - Math.atan((this.centerX - nowX) / (this.centerY - nowY)) * 180 / 3.14159);
					}
					if (yDis < 0) {
						// console.log('右下');
						arcNow = 134 + Math.atan((this.centerX - nowX) / (nowY - this.centerY)) * 180 / 3.14159;
					}
				}

				let changeValue = Math.floor((arcNow * (this.maxVal - this.minVal) / 268 + this.minVal) * 10) / 10;
				if (changeValue <= this.maxVal && changeValue >= this.minVal) {
					this.arcNow = arcNow;
					this.rotVal = Math.floor((arcNow * (this.maxVal - this.minVal) / 268 + this.minVal) * 10) / 10; //取一位小数
				}

				//todo
			}
		}
	}
</script>

<style lang="scss">
	.air-top {
		width: 660rpx;
		height: 428rpx;
		margin: 0 auto;
		position: relative;
		overflow: hidden;

		.control-botton {
			position: absolute;
			right: 30rpx;
			top: 26rpx;
		}

		.control-icon {
			position: absolute;
			width: 106rpx;
			height: 56rpx;
			line-height: 56rpx;
			top: 50%;
			margin-top: -28rpx;
			box-shadow: 0 0 6rpx rgba(0, 0, 0, 0.2);
			text-align: center;
			border-radius: 24rpx;
			font-size: 50rpx;
		}

		.reduce-icon {
			left: 0;
		}

		.add-icon {
			right: 0;
		}

		.air-top-inner {
			width: 328rpx;
			height: 328rpx;
			margin: 48rpx auto 0 auto;

		}
	}

	.circle-out {
		width: 328px;
		height: 328px;
		position: relative;
	}



	.circle {
		width: 328rpx;
		height: 328rpx;
		border-radius: 50%;
		// background: linear-gradient(to right, #80e2f5, #5175e9);
		overflow: hidden;
		position: relative;
	}

	.circle::before {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		content: '';
		position: absolute;
		// background: linear-gradient(to right, #7bd7f3, #77cef2);
		background:var(--colorbefore);
		left: 23rpx;
		top: 235rpx;
		z-index: 2;
	}

	.circle::after {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		content: '';
		position: absolute;
		// background: linear-gradient(to right, #5a8aec, #5580ea);
		background:var(--colorafter);
		right: 23rpx;
		top: 235rpx;
		z-index: 2;
	}

	.circle-inner {
		width: 280rpx;
		height: 280rpx;
		background: #fff;
		border-radius: 50%;
		position: absolute;
		left: 50%;
		margin-left: -140rpx;
		top: 50%;
		margin-top: -140rpx;
		z-index: 3;
		//滑动延迟
		// transition: all .5s linear;
	}

	.circle-inner::before {
		width: 64rpx;
		height: 64rpx;
		position: absolute;
		left: 0;
		bottom: 0;
		content: '';
		// 滑动剪头图标
		background: url("") no-repeat;
		background-size: 100% 100%;
	}

	.circle-inner-back {
		position: absolute;
		width: 100%;
		height: 20%;
		background: #fff;
		left: 0;
		bottom: 0;
	}


	.circle-num {
		line-height: 90rpx;
		text-align: center;
		color: #46b1ff;
		font-size: 60rpx;
		position: absolute;
		// width: 40%;
		// left: 30%;
		top: 60rpx;
		z-index: 4;
	}

	.circle-num text {
		font-size: 42rpx;
	}

	.circle-name {
		height: 56rpx;
		line-height: 56rpx;
		color: #000000;
		font-size: 28rpx;
		text-align: center;
		position: absolute;
		width: 40%;
		left: 30%;
		top: 150rpx;
		z-index: 4;
	}

	.circle-mini {
		// width: 120rpx;
		width: 50%;
		height: 54rpx;
		line-height: 54rpx;
		text-align: center;
		color: #000000;
		font-size: 28rpx;
		left: 0;
		bottom: -10rpx;
		position: absolute;
		font-weight: bold;
		background: white;
	}

	.circle-max {
		// width: 120rpx;
		width: 50%;
		height: 54rpx;
		line-height: 54rpx;
		text-align: center;
		color: #000000;
		font-size: 28rpx;
		right: 0;
		bottom: -10rpx;
		position: absolute;
		font-weight: bold;
		background: white;
	}

	.circle-out {
		width: 328rpx;
		height: 328rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
